<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">

    <span>{{title}}</span>
    <p>{{msg}}</p>
    <p> {{age}}岁时就是世界冠军 </p>
    <p>{{age+1}} </p>
    <!-- <p>{{age++}} </p> -->
    <h3>{{ age >= 18? '成年了':'未成年' }}</h3>

    <!-- 把值赋值给标签的原生属性上
    语法1: v-bind:原生属性名="vue变量" -->
    <a v-bind:href="url">点击区百度</a>

    <!-- 语法2:  :原生属性名="vue变量"  -->
    <img width="200px" :src="imgUrl" />
    

    <!-- bind 批量传递 -->

    <h3 :name="prop.name" :age="prop.age" :sex="prop.sex">{{msg}} </h3>

  </div>
  <script>

    const vm = new Vue({
      el: "#app",
      // 所有data的书写要写成一个函数,函数返回一个数据对象
      data () {
        return {
          title: "我的第一个Vue",
          msg: "TheShy",
          age: 18,
          url: "http://baidu.com",
          imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.911fz.com%2Fwp-content%2Fuploads%2F2019%2F12%2FA20191220_5dfccf9a7b7c6.jpg&refer=http%3A%2F%2Fwww.911fz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665663523&t=6aa91b5b172883944beae8017ae888ba",
          prop: {
            name: "laowang",
            age: 18,
            sex: "nan",
          },
        }
      },
    });

  </script>
</body>

</html>